import React from 'react';
import { Col, Form, Row } from 'antd';
import { AxCreateGridThreeFormPage } from '@/components/AxForm/AxCreateForm';
import { useState, useEffect } from 'react';
import { AxInput, AxPlaceHolder, AxSelect, AxTextArea } from '@/components/AxForm/AxFormItem';
import { AxUploadPicture } from '@/components/AxForm/AxFormItem/AxUpload';
import { axurl } from '@/shared/axurl';
import { AxTabs, AxTabPane } from '@/components/AxBase';
import { axhelper } from '@/shared/axhelper';
import Chart from '../deal/lib/chart';
import { axhttp } from '@/shared/axhttp';
import { AxSuccess } from '@/components/AxBase';

/**
 * @param type 当前发起的流程类型
 * @param types 支持的发起的流程类型
 * @param flowProps 组件的属性信息
 * @param extraParams 额外的参数信息
 */
const CreateFlow: React.FC<any> = props => {
    const {
        form,
        type: typeFromProps = {},
        types = [],
        flowProps = {},
        extraParams = {},
    } = props;
    /** 当前发起的流程类型 */
    const [type, setType] = useState<any>(typeFromProps);
    const [successVisible, setSuccessVisible] = useState(false);
    const [values, setValues] = useState<any>({});
    const [result, setResult] = useState({});
    /** 下一节点处理人员列表 */
    const [nextNode, setNextNode] = useState<any>([]);
    /** 下一节点处理人员列表原始数据 */
    const [nextNodeOriginal, setNextNodeOriginal] = useState<any>([]);
    /** 下一节点Id */
    const [nodeId, setNodeId] = useState<any>([]);
    const { getX, postFormX } = axhttp;

    useEffect(() => {
        const app = JSON.parse(localStorage.getItem('ax-data-app') || '{}');
        const v = {
            org: app.orgShortName,
        };
        setValues(v);
    }, []);

    useEffect(() => {
        /** 下一节点处理人员列表 */
        getX(type.url.readNextNode, { workFlowType: type.type, dataId: flowProps.studentStatusId }).then((res: any) => {
            setNextNode(axhelper.transToStandardData(res.data, 'userId', 'userName'));
            setNextNodeOriginal(res.data);
        });
    }, [type]);

    /** 发起流程 */
    const handleCreate = (fields: any) => {
        return postFormX(type.url.create, null, {
            ...fields,
            nodeId,
            ...extraParams,
        }).then(() => {
            setResult({
                ...values,
                ...fields,
            });
            setSuccessVisible(true);
        });
    }

    /** 切换接收人时，保存节点Id和设置接收人姓名 */
    const handleChangeNode = (userId: any) => {
        const f = nextNodeOriginal.find((f: any) => f.userId === userId);
        if (f) {
            form.setFieldsValue({
                userName: f.userName,
            });
            setNodeId(f.nodeId);
        }
    }

    /** 设置内容描述信息 */
    const setDescription = (v: any) => {
        form.setFieldsValue({
            description: v,
        });
    }

    /** 切换流程类型 */
    const handleChangeType = (v: any) => {
        const f = types.find((f: any) => f.type === v);
        setType(f);
    }

    return (
        <>
            {!successVisible && (
                <AxCreateGridThreeFormPage
                    form={form}
                    title={type.title}
                    handleCreate={handleCreate}
                    items={[
                        <AxTabs defaultActiveKey="tab0" wholerow='three'>
                            <AxTabPane tab="表单信息" key="tab0">
                                <Row>
                                    {types && types.length > 1 && <>
                                        <Col span={8}>
                                            <AxSelect
                                                form={form}
                                                label="流程类型"
                                                field="type"
                                                value={type.type}
                                                data={axhelper.transToStandardData(types, 'type', 'title')}
                                                onChange={handleChangeType}
                                                required
                                            />
                                        </Col>
                                        <Col span={8}>
                                            <AxPlaceHolder />
                                        </Col>
                                        <Col span={8}>
                                            <AxPlaceHolder />
                                        </Col>
                                    </>}
                                    {type && <type.FlowComponent form={form} url={type.url} setDescription={setDescription} {...flowProps} />}
                                    <Col span={16}>
                                        <AxInput form={form} label="标题" field="title" wholerow='two' value={type.title} required />
                                    </Col>
                                    <Col span={8}>
                                        <AxPlaceHolder />
                                    </Col>
                                    <Col span={24}>
                                        <Row>
                                            <Col span={16}>
                                                <AxTextArea
                                                    form={form}
                                                    label="内容"
                                                    field="description"
                                                    wholerow='two'
                                                    required
                                                />
                                            </Col>
                                            <Col span={8}>
                                                <AxPlaceHolder />
                                            </Col>
                                        </Row>
                                    </Col>
                                    <Col span={24}>
                                        <Row>
                                            <Col span={8}>
                                                {/* <AxUploadPicture
                                                    form={form}
                                                    label="附件"
                                                    field="attachmentIds"
                                                    uploadUrl={axurl.comm.uploadAttachFile}
                                                /> */}
                                            </Col>
                                            <Col span={8}>
                                                <AxPlaceHolder />
                                            </Col>
                                            <Col span={8}>
                                                <AxPlaceHolder />
                                            </Col>
                                        </Row>
                                    </Col>
                                    <Col span={24}>
                                        <Row>
                                            <Col span={8}>
                                                <AxSelect form={form} label="接收人" field="userId" data={nextNode} onChange={handleChangeNode} autoSelect required />
                                            </Col>
                                            <Col span={8}>
                                                <AxPlaceHolder />
                                            </Col>
                                            <Col span={8}>
                                                <AxPlaceHolder />
                                            </Col>
                                        </Row>
                                    </Col>
                                </Row>
                            </AxTabPane>
                            <AxTabPane tab="流程图" key="tab1">
                                <Chart url={type.url.readFlowChart} workFlowType={type.type} />
                            </AxTabPane>
                        </AxTabs>
                    ]}
                    hiddenItems={[
                        <AxInput form={form} field="userName" htmlHidden={true} />,
                    ]}
                />
            )}
            {
                successVisible && (
                    <AxSuccess subTitle={`本次${type.title}信息如下，请确认！`}
                        content={type && <type.Content result={result} />}
                        extra={type && <type.Extra result={result} />}
                    />
                )
            }
        </>
    );
};

export default Form.create<any>()(CreateFlow);
